<div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="12px">
  <div *ngFor="let row of options" fxLayout="row" style="width: 100%" fxLayoutGap="10px" fxLayoutAlign="space-between center">
    <div *ngFor="let option of row" [ngStyle]="getOptionStyle(option, row)">
        <!-- Checkbox -->
        <div *ngIf="option.type === 'checkbox'" 
        fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="10px"
        class="pointer"
        [eqmTooltip]="!option.tooltipAsComponent && option.tooltip"
        (click)="toggleCheckbox(option)">
          <eqm-checkbox [labelSide]="!!option.label ? 'right' : undefined" [interactive]="false" [checked]="option.value">{{option.label}}</eqm-checkbox>
          <eqm-question *ngIf="option.tooltip && option.tooltipAsComponent" [eqmTooltip]="option.tooltip"></eqm-question>
        </div> 

        <!-- Button -->
        <eqm-button *ngIf="option.type === 'button'" 
        fxFill type="narrow" 
        [enabled]="!option.isEnabled || option.isEnabled() === true"
        (pressed)="option.action()" [hoverable]="option.hasOwnProperty('hoverable') ? option.hoverable : true">
          <eqm-label [clickable]="true">{{option.label}}</eqm-label>
        </eqm-button>

        <!-- Select -->
        <div *ngIf="option.type === 'select'" fxLayout="row" fxFill fxLayoutGap="10px" fxLayoutAlign="center center">
          <eqm-label>{{option.label}}</eqm-label>
          <div fxLayout="row" fxLayoutGap="5px" fxFlex>
            <eqm-button *ngFor="let selectOption of option.options" 
            [fxFlex]="100 / option.options.length"
            [enabled]="!option.isEnabled || option.isEnabled() === true"
            [depressable]="false" [toggle]="true" type="narrow" [state]="option.selectedId === selectOption.id" (pressed)="selectedOption(option, selectOption)"
            >
              <eqm-icon *ngIf="selectOption.icon" [name]="selectOption.icon" [size]="16" [stroke]="selectOption.iconStroke || 0"></eqm-icon>
              <eqm-label *ngIf="selectOption.label" [clickable]="true">{{selectOption.label}}</eqm-label>
            </eqm-button>
          </div>
        </div>

        <!-- Divider -->
        <div *ngIf="option.type === 'divider'">
          <eqm-divider [orientation]="option.orientation"></eqm-divider>
        </div>

        <!-- Label -->
        <div *ngIf="option.type === 'label'" 
          (click)="openUrl(option.url)"
          fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center"
        >
          <eqm-label [clickable]="!!option.url" [class]="option.url ? 'clickable' : ''">{{option.label}}</eqm-label>
          <eqm-question *ngIf="option.tooltip" [eqmTooltip]="option.tooltip"></eqm-question>
        </div>

        <!-- HTML -->
        <div *ngIf="option.type === 'html'" [innerHTML]="option.html"></div>

        <!-- Dropdown -->
        <eqm-dropdown *ngIf="option.type === 'dropdown'"
          [items]="option.items"
          [labelParam]="option.labelParam"
          [selectedItem]="option.selectedItem"
          [numberOfVisibleItems]="option.numberOfVisibleItems || 6"
          [placeholder]="option.placeholder"
          [noItemsPlaceholder]="option.noItemsPlaceholder"
          (itemSelected)="option.itemSelected($event)"
          [forceDirection]="option.forceDirection"
          [closeOnSelect]="!!option.closeOnSelect"
          (refChanged)="option.refChanged && option.refChanged($event)"
        ></eqm-dropdown>

        <!-- Breadcrumbs -->
        <eqm-breadcrumbs *ngIf="option.type === 'breadcrumbs'" 
          [crumbs]="option.crumbs" (crumbClicked)="option.crumbClicked($event)"
        ></eqm-breadcrumbs>

        <!-- Input -->
        <eqm-input-field *ngIf="option.type === 'input'"
          [(text)]="option.value" (textChange)="option.changed && option.changed($event)"
          (enter)="option.enter && option.enter()"
          [placeholder]="option.placeholder"
          [editable]="option.editable" [fontSize]="option.fontSize"
          [enabled]="!option.isEnabled || option.isEnabled() === true"
        ></eqm-input-field>

        <!-- Flat Slider -->
        <eqm-flat-slider *ngIf="option.type === 'flat-slider'" [enabled]="!option.isEnabled || option.isEnabled() === true"
          [orientation]="option.orientation || 'horizontal'" [scale]="option.scale || 'linear'"
          [min]="option.min" [middle]="option.middle" [max]="option.max" [(value)]="option.value" 
          [doubleClickToAnimateToMiddle]="option.doubleClickToAnimateToMiddle" [showMiddleNotch]="option.showMiddleNotch"
          [animationDuration]="option.animationDuration" [animationFps]="option.animationFps"
          [scrollEnabled]="option.scrollEnabled" [stickToMiddle]="option.stickToMiddle"
          (valueChange)="option.changed && option.changed($event)"
          (userChangedValue)="sliderUserChangedValue(option, $event)"
          (stickedToMiddle)="option.stickedToMiddle && option.stickedToMiddle()"
        ></eqm-flat-slider>

        <!-- Skeuomorph Slider -->
        <eqm-skeuomorph-slider *ngIf="option.type === 'skeuomorph-slider'" [enabled]="!option.isEnabled || option.isEnabled() === true"
          [min]="option.min" [middle]="option.middle" [max]="option.max" [value]="option.value"
          [animationDuration]="option.animationDuration" [animationFps]="option.animationFps"
          [scrollEnabled]="option.scrollEnabled" [stickToMiddle]="option.stickToMiddle"
          (valueChange)="option.changed && option.changed($event)"
          (userChangedValue)="sliderUserChangedValue(option, $event)"
          (stickedToMiddle)="option.stickedToMiddle && option.stickedToMiddle()"
        ></eqm-skeuomorph-slider>

        <!-- Value Screen -->
        <eqm-value-screen *ngIf="option.type === 'value-screen'" 
          [enabled]="!option.isEnabled || option.isEnabled() === true" 
          (click)="option.clicked && option.clicked()"
          [eqmTooltip]="option.tooltip"
        >
          {{option.value}}
        </eqm-value-screen>
    </div>
  </div>
</div>